<template>
    <div class="contain" style="height:500px;width:auto;overflow:scroll;background:#EEEEEE;">

        <div>
            <Row style="text-align: center">
                <img :src="uploadImg" style="width: 20%">
            </Row>
            <Row class="row">
                <Col span="2">
                    <span>书名:</span>
                </Col>
                <Col span="4">
                    <p>{{this.bookname}}</p>
                </Col>
            </Row>
            <divider></divider>
            <Row class="row">
                <Col span="2">
                    <span>作者:</span>
                </Col>
                <Col span="4">
                    <p>{{this.writter}}</p>
                </Col>
            </Row>
            <divider></divider>
            <Row class="row">
                <Col span="2">
                    <span>简介:</span>
                </Col>
                <Col span="4">
                    <p>{{this.introduction}}</p>
                </Col>
            </Row>
            <divider></divider>
            <Row class="row">
                <Col span="2">
                    <span>拥有者:</span>
                </Col>
                <Col span="4">
                    <p>{{this.owner}}</p>
                </Col>
            </Row>
            <divider></divider>
            <Row class="btn">
                <Col span="2" class="btn1">
                    <Button type="success" @click="change">与他交换</Button>
                </Col>
                <Col span="2" class="btn2">
                    <Button type="error" @click="cancel">再看看</Button>
                </Col>
            </Row>
        </div>
        <modal  v-model="modalShow1" v-on:closeme="submit">
            <div slot="header">请选择交换书籍</div>
            <div style="position: relative">
                交换书籍
                <Select  id="sel" style="width: 190px;" @change="changeProduct($event)">
                    <option value="" disabled selected>必选</option>
                    <Option v-model="formInline" v-for="list in data2" :value="list.number" :key="list.number">{{list.book_name}}</Option>
                </Select>
            </div>
            <div slot="footer">
                <button class = "btn-confirm" type = "primary" @click="submit">确认</button>

                <button class = "btn-close" @click="modalShow1 = false">关闭</button>
            </div>
        </modal>
    </div>
</template>

<script>
export default {
    name: 'bookdetail',
    data() {
        return {
            // img: require('../assets/books/骆驼祥子.jpeg'),
            bookUrl: '',
            bookname: '',
            writter: '',
            introduction: '',
            owner: '',
            modalShow1: false,
            data2: [],
            column: 0,
            formInline: 0,
            uploadImg: '',
        }
    },
    created() {
        this.username = localStorage.getItem('userName')
        fetch('http://localhost:5000/getBookDetail', {
            method: 'post',
            body: JSON.stringify({
                connum: this.$route.params.connum,
            }),
            headers: { 'Content-Type': 'application/json' },
        }).then(
            (res) => res.json()
        ).then(
            (res) => {
                console.log(res)
                this.bookUrl = res.bookUrl
                this.uploadImg = require('../assets/books/' + this.bookUrl)
                this.bookname = res.bookname
                this.writter = res.writter
                this.introduction = res.introduction
                this.owner = res.owner
                this.column = this.$route.params.connum
            }
        )
    },
    methods: {
        changeProduct(event) {
            this.formInline = event.target.value
            // alert(this.formInline)
        },
        change() {
            fetch('http://localhost:5000/assignCon', {
                method: 'post',
                body: JSON.stringify({
                    username: localStorage.getItem('userName'),
                }),
                headers: { 'Content-Type': 'application/json' },
            }).then(
                (res) => res.json()
            ).then(
                (res) => {
                    this.data2 = res.data
                }
            )
            this.modalShow1 = !this.modalShow1
        },
        submit() {
            this.modalShow1 = !this.modalShow1
            fetch('http://localhost:5000/commit_choice', {
                method: 'post',
                body: JSON.stringify({
                    connum: this.column,
                    index2: this.data2[this.formInline.valueOf()].book_name,
                }),
                headers: { 'Content-Type': 'application/json' },
            }).then(
                (res) => res.json()
            ).then(
                (res) => {
                    if (res.result === 'success') {
                        alert('分配成功')
                    }
                }
            )
        },
        cancel() {
            this.$router.push({ path: 'library' })
        },
    },
}
</script>

<style scoped>
.pic{
    height: 150px;
    width: 120px;
}
.contain{
    padding-left: 50px;
}
.btn1{
    padding-left: 400px;
    margin-right: 150px;
}
</style>
